<style>
    #febs-apex-column .layui-card-header {
        font-weight: 600;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-apex-column" lay-title="柱状图表">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">基础柱状图</div>
                <div class="layui-card-body">
                    <div id="basicColumnChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带数据标签柱状图</div>
                <div class="layui-card-body">
                    <div id="dataLabelsColumnChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">层叠柱状图</div>
                <div class="layui-card-body">
                    <div id="stackedColumnChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">百分比层叠柱状图</div>
                <div class="layui-card-body">
                    <div id="stackedColumnChart100"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带负值的柱状图</div>
                <div class="layui-card-body">
                    <div id="columnWithNegativeChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">范围柱状图</div>
                <div class="layui-card-body">
                    <div id="rangeColumnChart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{febs/lay/data/dataSeries.js}"></script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['apexcharts'], function () {

        // ----------------- basicColumnChart -------------------
        var basicColumnChartOptions = {
            chart: {
                height: 320,
                type: 'bar',
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '50%'
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            series: [{
                name: 'Net Profit',
                data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
            }, {
                name: 'Revenue',
                data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
            }, {
                name: 'Free Cash Flow',
                data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
            }],
            xaxis: {
                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
            },
            fill: {
                opacity: 1

            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return "$ " + val + " thousands"
                    }
                }
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#basicColumnChart"),
            basicColumnChartOptions
        ).render();

        // -------------- dataLabelsColumnChart ---------------
        var dataLabelsColumnChartOptions = {
            chart: {
                height: 320,
                type: 'bar',
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        position: 'top' // top, center, bottom
                    }
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },
            series: [{
                name: 'Inflation',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
            }],
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                position: 'top',
                labels: {
                    offsetY: -18

                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#D8E3F0',
                            colorTo: '#BED1E6',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                    offsetY: -35

                }
            },
            fill: {
                gradient: {
                    shade: 'light',
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    gradientToColors: undefined,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [50, 0, 100, 100]
                }
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val + "%";
                    }
                }
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#dataLabelsColumnChart"),
            dataLabelsColumnChartOptions
        ).render();

        // ---------------- stackedColumnChart --------------
        var stackedColumnChartOptions = {
            chart: {
                height: 320,
                type: 'bar',
                stacked: true,
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: true
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false
                }
            },
            series: [{
                name: 'PRODUCT A',
                data: [44, 55, 41, 67, 22, 43]
            }, {
                name: 'PRODUCT B',
                data: [13, 23, 20, 8, 13, 27]
            }, {
                name: 'PRODUCT C',
                data: [11, 17, 15, 15, 21, 14]
            }, {
                name: 'PRODUCT D',
                data: [21, 7, 25, 13, 22, 8]
            }],
            xaxis: {
                type: 'datetime',
                categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
            },
            legend: {
                position: 'right',
                offsetY: 40
            },
            fill: {
                opacity: 1
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#stackedColumnChart"),
            stackedColumnChartOptions
        ).render();

        // ------------ stackedColumnChart100 -------------
        var stackedColumnChart100Options = {
            chart: {
                height: 320,
                type: 'bar',
                stacked: true,
                stackType: '100%',
                toolbar: {
                    show: false
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            series: [{
                name: 'PRODUCT A',
                data: [44, 55, 41, 67, 22, 43, 21, 49]
            }, {
                name: 'PRODUCT B',
                data: [13, 23, 20, 8, 13, 27, 33, 12]
            }, {
                name: 'PRODUCT C',
                data: [11, 17, 15, 15, 21, 14, 15, 13]
            }],
            xaxis: {
                categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4'],
            },
            fill: {
                opacity: 1
            },

            legend: {
                position: 'right',
                offsetX: 0,
                offsetY: 50
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#stackedColumnChart100"),
            stackedColumnChart100Options
        ).render();

        // ----------------- columnWithNegativeChart -------------
        var columnWithNegativeChartOptions = {
            chart: {
                height: 320,
                type: 'bar',
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    colors: {
                        ranges: [
                            {
                                from: -100,
                                to: -46,
                                color: '#F15B46'
                            }, {
                                from: -45,
                                to: 0,
                                color: '#FEB019'
                            }
                        ]
                    },
                    columnWidth: '80%'
                }
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                name: 'Cash Flow',
                data: [1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07,
                    5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6
                ]
            }],

            yaxis: {
                labels: {
                    formatter: function (y) {
                        return y.toFixed(0) + "%";
                    }
                }

            },
            xaxis: {
                categories: [
                    '1', '2', '3', '4', '5', '6',
                    '7', '8', '9', '10', '11', '12',
                    '13', '14', '15', '16', '17', '18',
                    '19', '20', '21', '22', '23', '24',
                    '25', '26'
                ],
                labels: {
                    rotate: -90
                }
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#columnWithNegativeChart"),
            columnWithNegativeChartOptions
        ).render();

        // -------------- rangeColumnChart -------------
        var rangeColumnChartOptions = {
            chart: {
                height: 320,
                type: 'rangeBar',
                toolbar: {
                    show: false
                }
            },
            plotOptions: {
                bar: {
                    horizontal: false
                }
            },
            dataLabels: {
                enabled: true
            },
            series: [{
                data: [{
                    x: 'Team A',
                    y: [1, 5]
                }, {
                    x: 'Team B',
                    y: [4, 6]
                }, {
                    x: 'Team C',
                    y: [5, 8]
                }, {
                    x: 'Team D',
                    y: [3, 11]
                }]
            }, {
                data: [{
                    x: 'Team A',
                    y: [2, 6]
                }, {
                    x: 'Team B',
                    y: [1, 3]
                }, {
                    x: 'Team C',
                    y: [7, 8]
                }, {
                    x: 'Team D',
                    y: [5, 9]
                }]
            }],
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#rangeColumnChart"),
            rangeColumnChartOptions
        ).render();

    });
</script>